<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OrcasThemes">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Home</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link href="css/lity.css" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- Vue.js应用根节点 -->
    <div id="myapp" v-cloak>
        <!-- 首页部分 -->
        <div id="home1" class="container-fluid standard-bg">
            <!-- 顶部导航栏 -->
            <div class="row header-top">
                <div class="col-lg-3 col-md-6 col-sm-5 col-xs-8">
                    <!-- 网站Logo -->
                    <a class="main-logo" href="/index.html"><img src="img/main-logo.png"
                            class="main-logo img-responsive" alt="Muvee Reviews" title="Muvee Reviews"></a>
                </div>
                <div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">
                    <!-- 大屏幕下中间预留区域 -->
                </div>
                <div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
                    <div class="right-box">
                        <!-- 新增视频按钮，点击弹出模态框 -->
                        <button type="button" class="access-btn" v-show="userRole">管理员</button>
                        <button type="button" class="access-btn" data-toggle="modal" data-target="#enquirypopup"
                            v-show="userRole">新增视频</button>

                    </div>
                </div>
            </div>

            <!-- 主导航菜单 -->
            <div class="row home-mega-menu ">
                <div class="col-md-12">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <!-- 移动端汉堡菜单按钮 -->
                            <button class="navbar-toggle" type="button" data-toggle="collapse"
                                data-target=".js-navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <!-- 导航菜单内容，大屏幕下展开，小屏幕下折叠 -->
                        <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
                            <!-- 搜索框，使用Vue实现搜索功能 -->
                            <div class="search-block">
                                <form action="/Video" method="get" @submit.prevent>
                                    <input type="search" placeholder="Search" v-model="searchQuery"
                                        v-on:input="debouncedSearch" class="form-control">
                                </form>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-2 col-md-4 hidden-sm hidden-xs">
                </div>
                <!-- 主内容区 -->
                <div class="col-lg-10 col-md-8">
                    <section id="home-main">
                        <!-- 视频列表标题 -->
                        <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>视频列表</h2>

                        <!-- 视频内容展示区域 -->
                        <div class="row">
                            <!-- 视频文章区域 -->
                            <div class="col-lg-9 col-md-12 col-sm-12">
                                <!-- 使用Vue的v-for指令循环渲染视频卡片 -->
                                <div class="row auto-clear">
                                    <article class="col-lg-3 col-md-6 col-sm-4" v-for="video in filteredVideos">
                                        <!-- 视频卡片组件 -->
                                        <div class="post post-medium">
                                            <div class="thumbr">
                                                <!-- 视频缩略图和播放按钮 -->
                                                <!-- 拼接布尔参数 `user_role`，值为 true/false -->
                                                <a class="afterglow post-thumb"
                                                    :href="`/video.html?id=${video.id}&user_role=${userRole}`"
                                                    target="_blank" v-cloak>
                                                    <span class="play-btn-border" title="Play">
                                                        <i class="fa fa-play-circle headline-round"
                                                            aria-hidden="true"></i>
                                                    </span>
                                                    <img class="video-img" :src="video.image" alt="#" v-cloak>
                                                </a>
                                            </div>
                                            <div class="infor">
                                                <!-- 视频标题 -->
                                                <h4>
                                                    <a class="title" href="#" v-cloak>{{video.name}}</a>
                                                </h4>
                                                <!-- 视频点赞数 -->
                                                <span class="posts-txt" title="Posts from Channel"><i
                                                        class="fa fa-thumbs-up" aria-hidden="true"></i>20.895</span>
                                                <!-- 视频评分 -->
                                                <div class="ratings">
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                                    <i class="fa fa-star-o"></i>
                                                    <i class="fa fa-star-half"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                                <div class="clearfix spacer"></div>
                            </div>

                            <!-- 右侧边栏，中等屏幕下隐藏 -->
                            <div class="col-lg-3 hidden-md col-sm-12 text-center top-sidebar">
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <!-- 频道区域 -->
        <div id="channels-block" class="container-fluid channels-bg">
        </div>

        <!-- 底部横幅区域 -->
        <div id="bottom-banner" class="container text-center">
        </div>

        <!-- 页脚区域 -->
        <div id="footer" class="container-fluid footer-background">
            <div class="container">
                <footer>
                    <!-- 页脚内容区 -->
                    <div class="row">
                        <!-- 社交链接区域 -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                            <div class="row auto-clear">
                            </div>
                        </div>

                        <!-- 标签区域 -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        </div>

                        <!-- 最新文章区域 -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        </div>

                        <!-- 链接区域 -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        </div>
                    </div>

                    <!-- 版权信息 -->
                    <div class="row copyright-bottom text-center">
                        <div class="col-md-12 text-center">
                            <a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template">
                                <img src="img/footer-logo.png" class="img-responsive text-center"
                                    alt="Video Magazine Bootstrap HTML5 template">
                            </a>
                        </div>
                    </div>
                </footer>
            </div>
        </div>

        <!-- 新增视频模态框 -->
        <div id="enquirypopup" class="modal fade in " role="dialog">
            <div class="modal-dialog">
                <!-- 模态框内容 -->
                <div class="modal-content row">
                    <div class="modal-header custom-modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>新增视频</h2>
                    </div>
                    <div class="modal-body">
                        <!-- 视频上传表单 -->
                        <form name="info_form" class="form-inline" action="/video" method="post"
                            enctype="multipart/form-data">
                            <div class="form-group col-sm-12">
                                <input type="text" class="form-control" name="name" placeholder="输入视频名称">
                            </div>
                            <div class="form-group col-sm-12">
                                <input type="text" class="form-control" name="info" placeholder="输入视频简介">
                            </div>
                            <div class="form-group col-sm-12">
                                <span>选择视频</span>
                                <input type="file" class="form-control" name="video" placeholder="选择视频文件">
                            </div>
                            <div class="form-group col-sm-12">
                                <span>选择图片</span>
                                <input type="file" class="form-control" name="image" placeholder="选择封面图片">
                            </div>
                            <div class="form-group col-sm-12">
                                <button class="subscribe-btn pull-right" type="submit" title="Subscribe">上传</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.12.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lity.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 导航栏下拉菜单悬停效果
        $(".nav .dropdown").hover(function () {
            $(this).find(".dropdown-toggle").dropdown("toggle");
        });

        // 创建Vue应用实例
        let app = new Vue({
            el: '#myapp',
            data: {
                videos: [],  // 视频数据数组，初始为空
                searchQuery: '',  // 搜索关键词
                debounceTimer: null,  // 防抖定时器
                userRole: "false",
            },

            // 计算属性：过滤后的视频列表
            computed: {
                filteredVideos () {
                    // 检查videos是否为有效数组
                    if (!this.videos || !Array.isArray(this.videos)) {
                        return [];
                    }

                    // 根据搜索关键词过滤视频
                    return this.videos.filter(video =>
                        video.name.toLowerCase().includes(this.searchQuery.toLowerCase())
                    );
                }
            },

            // 方法
            methods: {
                // 搜索防抖处理
                debouncedSearch () {
                    if (this.debounceTimer) clearTimeout(this.debounceTimer);
                    this.debounceTimer = setTimeout(() => {
                        this.Search_Video();
                    }, 300);  // 300ms防抖延迟
                },

                // 获取所有视频
                get_allvideos (force = false) {
                    if (this.debounceTimer) clearTimeout(this.debounceTimer);
                    if (!force) {
                        this.debounceTimer = setTimeout(() => {
                            this.Search_Video();
                        }, 300);
                    } else {
                        // 强制立即搜索
                        this.Search_Video();
                    }
                },

                // 搜索视频方法，通过AJAX请求获取视频数据
                Search_Video () {
                    $.ajax({
                        url: "/Video",
                        type: "get",
                        context: this,
                        data: { search: this.searchQuery },  // 传递搜索关键词
                        success: function (result) {
                            // 确保赋值给videos的是数组，处理非数组返回情况
                            this.videos = Array.isArray(result) ? result : [];
                        }.bind(this)
                    });
                }
            },

            // 组件挂载后执行，初始化获取视频数据
            mounted () {
                const userRole = localStorage.getItem('userRole');
                this.userRole = userRole === 'admin'; // 转为布尔值
                this.get_allvideos(true);  // 强制加载所有视频
            }
        });
    </script>

</html>